<template>
  <div>
    <div id="main">
      <div>
        <el-form>
          <el-form-item prop="name">
            <el-input
              style="display: block"
              v-model="name"
              id="searchName"
              placeholder="请输入员工的姓名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="identityCard">
            <el-input
              v-model="identityCard"
              id="searchIdentityCard"
              placeholder="请输入员工的身份证号"
            >
            </el-input>
          </el-form-item>

          <el-button
            type="primary"
            round
            icon="el-icon-search"
            id="searchBtn"
            @click="search()"
            >搜索</el-button
          >
        </el-form>
      </div>
      <div id="background">
        <el-row id="cards">
          <el-col
            :span="4"
            v-for="(o, index) in docs.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )"
            :key="o"
            style="margin-top: 30px"
            :offset="1"
          >
            <el-link @click="toOnself(o)">
              <el-card :body-style="{ padding: '20px', marginTop: '20px' }">
                <img src="~@/assets/images/userImage.png" class="image" />
                <div style="padding: 14px">
                  <span>{{ o.name }}</span>
                  <div class="bottom clearfix">
                    <span
                      ><i>所在部门：</i><strong>{{ o.deptName }}</strong></span
                    >
                  </div>
                </div>
              </el-card>
            </el-link>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-pagination
      id="change"
      v-show="docs.length > pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="docs.length"
    >
    </el-pagination>
  </div>
</template>
<script>
import docApi from "@/api/userdoc";
import api from "@/api/background";
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 8,
      docs: [],
      name: "",
      identityCard: "",
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //搜索背调信息
    search() {
      let data = {};
      data.name = this.name;
      data.identityCard = this.identityCard;
      api
        .investigation(data)
        .then((response) => {
          this.docs = response.list;
        })
        .catch((err) => {
          this.message.error(response.msg);
        });
    },
    //跳转到个人页
    toOnself(obj) {
      this.$router.push({
        path: "/background/oneself",
        query: { person: obj },
      });
    },
  },
  created() {
    docApi.getList().then((response) => {
      this.docs = response.list;
    });
  },
};
</script>
<style>
#background {
  padding: 0;
  width: 100%;
  height: 900px;
  overflow: hidden;
}
#main {
  position: absolute;
  top: 150px;
  height: 1000px;
}
#search {
  width: 400px;
  margin-left: 620px;
  margin-top: 150px;
  border-radius: 20px;
}
#searchBtn {
  position: absolute;
  left: 1100px;
  top: 20px;
  width: 200px;
  height: 40px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
#cards {
  padding-left: 200px; 
  margin-left: -50px;
  margin-top: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  height: 1000px;
}
#searchName {
  width: 300px;
  position: absolute;
  top: 20px;
  left: 400px;
}
#searchIdentityCard {
  width: 300px;
  position: absolute;
  top: -28px;
  left: 760px;
}
#change {
  position: absolute;
  left: 550px;
  top: 1080px;
}
</style>